<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        function loadImg(src) {
            // 1.返回一个匿名的Promise类的实例
            const p = new Promise(
                // 2.传入一个函数，内部有两个形参分别为resolve和reject，这两个形参同样也是函数
                (resolve, reject) => {
                    //3. 先定义一张图片,创建一个element
                    const img = document.createElement('img')
                    //4. 加载完之后传入一个回调函数
                    img.onload = () => {
                        //5.通过resolve方法将要加载的对象传进来
                        resolve(img)
                    }
                    //5.当遇到问题，就执行reject这个函数
                    img.onerror = () => {
                        //6. 失败的话就传入一个模板字符串,把错误信息传递出去
                        const err = new Error(`图片加载失败${src}`);
                        reject(err);
                    }
                    img.src = src;
                }
            )
            return p
        }

        // const url = 'https://img3.sycdn.imooc.com/5b8cd5540001a30c02000200-140-140.jpg'

        // .then 表示成功了则调用
        // .catch 表示失败了则返回一个错误
        // loadImg(url).then(img => {
        //     console.log(img.width); //140
        //     return img;
        //     // return了img后就会将img传入到下一个then的函数中
        // }).then(img => {
        //     console.log(img.height); //140
        //     //最后如果是有错误呢，就打印错误
        // }).catch(ex => console.error(ex))


        const url1 = 'https://img3.sycdn.imooc.com/5b8cd5540001a30c02000200-140-140.jpg'
        // 再找一个图片
        const url2 = 'https://avatar.csdnimg.cn/0/1/A/1_weixin_44738381.jpg'

        loadImg(url1).then(img1 => {
            console.log(img1.width);
            return img1 // return 一个普通对象
        }).then(img1 => {
            console.log(img1.height)
            return loadImg(url2) //return 一个promise实例，下面的img2对应的就是新的实例下的img
        }).then(img2 => {
            console.log(img2.width);
            return img2;
        }).then(img2 => {
            console.log(img2.height);
        }).catch(ex => console.error(ex));

        //解决callback hell 回调地狱的问题
    </script>
</body>

</html>